<template>
  <page-wrap back hide-tab title="招聘列表" stayStill class="page">
    <view class="person-search u-boder-bottom">
      <u-search
        class="search"
        shape="round"
        placeholder="输入应聘者姓名/应聘职位"
        v-model="value"
        @search="onSearch"
        :showAction="false"
      ></u-search>
      <text class="add-icon" @click="handleAdd">+</text>
    </view>
    <view :style="
        'height: calc(100vh - ' +
        navHeight +
        'px - 82rpx - env(safe-area-inset-bottom));'
      ">
    <scroll-view style="height: 100%;" :scroll-y="true" @scrolltolower="handleMore">
      <view class="person-list">
        <person-item
          v-for="item in personList"
          :key="item.resumeId"
          :item="item"
          :props="props"
          @itemClick="handleItem"
        ></person-item>
        <u-loadmore v-if="!showEmpty" :status="moreLoading" :load-text="loadText" />
        <view class="empty">
          <u-empty v-if="showEmpty" text="暂无数据" mode="list"></u-empty>
        </view>
      </view>
    </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import { candidateList } from "@/api/index";
import PersonItem from "./components/PersonItem";

export default {
  components: {
    PersonItem
  },
  data() {
    return {
      navHeight: getApp().globalData.navHeight,
      srhIcon: this.$imgBaseSelf + "home/search.png",
      value: "",
      total: 0,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      personList: [],
      showEmpty: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了"
      },
      customStyle: {
        border: "none",
        backgroundColor: "#E9ECEF"
      },
      pageParam: {
        page: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleAdd() {
      const enUrl = encodeURI("https://m.job1001.com/v2/apply/#/apply/basic");
      // const enUrl = encodeURI("http://192.168.60.170:8080/#/apply/success");

      uni.navigateTo({
        url: `/pagesSub/userCenter/hrApply/index?url=${enUrl}`
      });
    },
    onSearch() {
      this.pageParam.page = 1;
      this.personList = [];
      this.getList();
    },
    handleDetail(item) {
      uni.navigateTo({
        url: "/pagesSub/userCenter/hrList/index?resumeId=" + item.resumeId
      });
    },
    handleMore() {
      this.$set(this.pageParam, "page", this.pageParam.page + 1);
      this.getList(true);
    },
    getList(isMore) {
      if (
        isMore &&
        (this.moreLoading == "loading" || this.moreLoading == "nomore")
      )
        return;
      this.moreLoading = "loading";
      let params = {
        pageSize: this.pageParam.pageSize,
        pageNo: this.pageParam.page,
        name: this.value
      };
      candidateList(params).then(res => {
        console.log(res)
        this.showEmpty = res.pageparam.sums == 0 ? true : false;
        if (isMore) {
          this.personList.push(...(res.data || []));
        } else {
          this.personList = res.data || [];
        }
        if (res.data) {
          this.moreLoading = "loadmore";
          if (+this.pageParam.page >= +res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
        }
        console.log(this.personList)
      });
    }
  }
};
</script>

<style lang="scss">
$img-base-person: $img-base + "deliveryperson/";
@include img-base-self(".person_flag", "deliveryperson/invalid.png");
.page {
  .person-list {
    margin: 32rpx 32rpx 24rpx;
    &-item {
      position: relative;
      margin-bottom: $uni-spacing-col-lg;
      padding: 32rpx;
      background-color: $uni-bg-color;
      border-radius: $uni-border-radius-big;
      .person_title {
        margin-bottom: $uni-spacing-col-lg;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }

      .person_cname {
        margin-bottom: $uni-spacing-col-lg;
        font-size: $uni-font-size-sm;
      }

      .person_date {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-555;
      }

      .person_flag {
        position: absolute;
        width: 73rpx;
        height: 73rpx;
        right: 32rpx;
        top: 32rpx;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
      }
    }
  }
}
.person-search {
  padding: 24rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  .search {
    flex: 1;
    margin-right: 20rpx;
  }
  .add-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 50rpx;
    font-size: 68rpx;
    margin-top: -12rpx;
  }
}
.search-list {
  flex-grow: 1;
  height: 1rpx;
}
.empty {
  margin-top: 120rpx;
}
</style>
